<template>
  <div class="setting">
    <Header :fixed="true">
      <van-icon name="arrow-left" slot="left" />
      <div slot="title">我的设置</div>
    </Header>
    <div class="setting-box">
      <van-cell title="用户名(真实姓名)" :value="form.realName" />
      <van-cell title="性别" is-link :value="form.gender == 0 ? '女' : '男'" @click="selectGender" />
      <van-cell title="身份证号" is-link :value="form.idCard" @click="putClick('idCard')" />
      <van-cell title="学位" is-link :value="form.degree" @click="putClick('degree')" />
      <van-cell title="职称" :value="form.Professional" />
      <van-cell title="工作单位" is-link :value="form.workUnit" @click="putClick('workUnit')" />
      <van-cell title="推荐部门" is-link :value="form.recommendDept" @click="selectDept" />
      <van-cell title="推荐方向" is-link :value="form.recommendDirection" @click="putClick('recommendDirection')" />
      <van-cell title="入选组别" :value="form.selectGroup" />
      <van-cell title="手机号" :value="form.mobilePhone" />
      <van-cell title="工作电话" :value="form.workPhone" />
      <van-cell title="电子邮件" is-link :value="form.email" @click="putClick('email')" />
      <van-cell title="通讯地址" is-link :value="form.companyAddress" @click="putClick('companyAddress')" />
    </div>

    <van-dialog
      v-model="show3"
      show-cancel-button
      @confirm="onSublime">
      <van-field class="seeting-ptop" v-model="value" placeholder="填写修改内容" />
    </van-dialog>

    <!-- 性别选择 -->
    <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" @select="onSelect"/>

    <!-- 部门选择 -->
    <van-action-sheet v-model="show2" :actions="list" cancel-text="取消" @select="onSelect2"/>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { getMyInfo, updateUserInfo } from '@/api/setting'
export default {
  name: 'setting',
  data () {
    return {
      form: {},
      list: [],
      show: false,
      show2: false,
      show3: false,
      name: '',
      value: '',
      actions: [
        {name: '女', value: '0' },
        {name: '男', value: '1' }
      ]
    }
  },
  components: {
    Header
  },
  mounted () {
    
  },
  watch: {
    
  },
  created () {
    this.getMyInfo()
  },
  methods: {
    async getMyInfo () {
      let { data } = await getMyInfo({id: this.$store.state.user.userId})
      if (data.result == 'suc') {
        let arr = data.recommendDeptList.filter(item => {
          if (data.data.recommendDept == item.value) return item
        })
        data.data.recommendDept = arr[0].name
        this.form = data.data
        this.list = data.recommendDeptList
      }
    },
    async onSelect (item) {
      let obj = {
        id: this.$store.state.user.userId,
        gender: item.value
      }
      let {data} = await updateUserInfo(obj)
      if (data.result == 'suc') {
        this.getMyInfo()
        this.show = false
      } else {
        this.$toast('修改失败');
      }
    },
    selectGender () {
      this.show = true
    },
    async onSelect2 (item) {
      let obj = {
        id: this.$store.state.user.userId,
        recommendDept: item.id
      }
      let {data} = await updateUserInfo(obj)
      if (data.result == 'suc') {
        this.getMyInfo()
        this.show2 = false
      } else {
        this.$toast('修改失败');
      }
    },
    selectDept () {
      this.show2 = true
    },
    putClick (val) {
      this.name = val
      this.value = ''
      this.show3 = true
    },
    async onSublime () {
      let name = this.name
      console.log(name)
      let obj = {
        id: this.$store.state.user.userId,
      }
      obj[name] = this.value
      let {data} = await updateUserInfo(obj)
      if (data.result == 'suc') {
        this.getMyInfo()
        this.show3 = false
      } else {
        this.$toast('修改失败');
      }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.setting {
  min-height: 100vh;
  background-color: #f8f8f8;
}
.setting-box {
  padding-top: 70px;
  background-color: #f8f8f8;
}
.seeting-ptop {
  margin-top:16px;
}
</style>